<html> 
    <head> 
        <!--
            1:
           将内层div的display设置为table cell能确保div的宽度适应内容的宽度。
           将外层div的display设置为table，text-align设置为center，即可保证内层div居中显示
            2:
           内层div的display设置为inline-block，确保div的宽度适应内容的宽度
           外层div的text-align设置为center，即保证内层div居中显示

           垂直的原理就是td设置vertical-align:middle，内容居中对齐
        -->
        <meta charset="utf-8"> 
        <title>HelloWorld</title>
        <style>
            html,body {
                width: 100%;
                height:100%;
                padding: 0;
                margin: 0;
            }
            .M {
                width: 100%;
                height:100%;
                display:table;
            }
            .M-box{
                width: 100%;
                height:100%;
                text-align: center;
                vertical-align:middle;
                display:table-cell;
                border:1px solid #ccc;
            }
            .M-box2 {
                display:inline-block;
                height:auto;
                max-width:300px;
                word-break:break-all;
                text-align:left;
                border:1px solid #ccc;
            }
        </style> 
    </head>
    <body> 
        <div class="M">
            <div class="M-box">                         
                <div class="M-box2 m-style">
                    3213232123fdsafdsafsaffdfdsafdsafafdsafdsafdfdsafdsfdsafdsfdsafdsfdsafdsffdasfdasfs<br>fdsa
                </div>
            </div>
        </div>
      <!--说明 https://blog.csdn.net/luckyone1111/article/details/81138116,https://blog.csdn.net/lanseyuanwei2/article/details/51889829-->
    </body> 
</html>